<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="title">
     
      <el-breadcrumb-item :to="{ path: '../pictule/list' }" class="title-other">方案库</el-breadcrumb-item>
      <el-breadcrumb-item style="color: red !important;">{{title}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="picture-pool">
      <div class="main">
        <div >
          <p class="main-title">{{title}}</p>
          <hr class="main-hr">
          <p class="main-subtitle">{{subtitle}}</p>
        </div>
        <div class="topdiv">
          <p>方案名称：{{displayname}}</p>
          <p>项目名称：{{name}}</p>
          <p>方案说明：{{remark}}</p>
         <!--  <el-input placeholder="请输入内容" class="topdiv-input"></el-input> -->
        </div>
        <div class="bottomdiv">
          <div class="bottom-left">
          <p class="left-p">方案预览图</p>
          </div>
          <div class="bottom-right">
          <!--   <div class="head-div">
              <div class="head-r">
                <span>主目录</span>
                <span>进入后台管理</span>
              </div>
            </div> -->
            <div class="content-div">
              <el-row :gutter="0" v-if="lists.length<=9">
                <el-col :span="8" v-for="(item,index) in lists" :key="index">
                  <div class="grid-content bg-purple">
                    <img :src="item.image==null?picsrc:'http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.image.storeId" @error="imgError(item.image)" height="40" width="36" style="z-index:999;">
                  <!--   <div class="picture"><img class="item-pic"  alt=""></div> -->
                    <p>{{item.name}}</p>
                  </div>
                </el-col>
                
              </el-row>
               <el-row :gutter="0" v-if="lists.length>9">
                <el-col :span="6" v-for="(item,index) in lists" :key="index">
                  <div class="grid-content bg-purple">
                    <img :src="item.image==null?picsrc:'http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.image.storeId" @error="imgError(item.image)" height="40" width="36" style="z-index:999;">
                  <!--   <div class="picture"><img class="item-pic"  alt=""></div> -->
                    <p>{{item.name}}</p>
                  </div>
                </el-col>
                
              </el-row>
             </div>
          </div>
        </div>

        <!-- second -->
        <div class="second-part">
          <div>
            <table cellspacing="0">
              <thead>
                <tr>
                 <!--  <th style="width: 68px;"><i class="el-icon-edit"></i>全选</th> -->
                  <th style="width: 5%;">序号</th>
                  <th style="width: 15%;">图标</th>
                  <th style="width: 15%;">菜单名称</th>
                  <th style="width: 10%;">子菜单个数</th>
                  <th style="width: 20%;">子菜单名称</th>
                  <th style="width: 20%;">链接分类</th>
                  <th style="width: 10%;">备注</th>
                  <!-- <th style="width: 10%;">操作</th> -->
                </tr>
              </thead>
            </table>
            <div class="table-scroll">
              <table cellspacing="0" class="table-height">
                <tbody id="tbodyid">
                  <tr v-for="(item,index1) in lists" :key="item.id">
                    <!-- <td style="width: 70px;"><input type="checkbox" class="checkbox" /> </td> -->
                    <td style="width: 5%;">{{index1+1}}</td>
                    <td style="width: 15%;">
                      <div class="picture-item-wrapper">
                        <div class="picture"><img class="item-pic" :src="item.image==null?picsrc:'http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.image.storeId" @error="imgError(item.image)" alt=""></div>
                      </div>
                    </td>
                    <td style="width: 15%;">{{item.name}}</td>
                    <td style="width: 10%;">{{item.children==null?0:item.children.length}}</td>
                    <td style="width: 20%;">
                      <ul class="tableul">
                        <li v-for="(subitem,index) in item.children" :class="(index==2&&item.children.length>3)? 'listyle2':'listyle1'" :key="index" v-if="index<3">

                          <span class="picture-item-wrapper lispan">
                            <span class="picture pic" ><img class="item-pic img" :src="subitem.image==null?picsrc:'http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+subitem.image.storeId" @error="imgError(subitem.image)" alt=""></span>
                          </span>
                          <span>{{subitem.name}}</span>
                          <el-button type="text" @click="showDetail(index1)" v-if="item.children.length>3&&index==2" class="libutton">【更多】</el-button>
                        </li>
                        <li class="linone" v-if="item.children.length==0"></li>
                        <li class="linone" v-if="item.children.length==0"></li>
                        <li class="linone" v-if="item.children.length==0"></li>
                        <li class="linone" v-if="item.children.length==1"></li>
                        <li class="linone" v-if="item.children.length==1"></li>
                        <li class="linone" v-if="item.children.length==2"></li>
                      </ul>
                    </td>
                    <td style="width: 20%;">
                      <ul style="display: flex;flex-direction: column;">
                        <li v-for="(subitem,index) in item.children" :key="index" v-if="index<3" class="ulli">
                          {{subitem.target}}
                        </li>
                        <li style="flex: 1;border-top:1px solid #d3d4d6;padding: 20px 70px 20px 70px;" v-if="item.children.length==0"></li>
                        <li class="lione" v-if="item.children.length==0"></li>
                        <li class="lione" v-if="item.children.length==0"></li>
                        <li class="lione" v-if="item.children.length==1"></li>
                        <li class="lione" v-if="item.children.length==1"></li>
                        <li class="lione" v-if="item.children.length==2"></li>
                      </ul>

                    </td>
                    <td style="width:10%;">{{item.remark}}</td>
                    
                  </tr>
                </tbody>

              </table>
            </div>
            <div>
              <div style="margin-top: 100px;text-align: center;">
                <!-- <el-button class="bbutton">导出配置文件</el-button> -->
                <el-button class="bbutton" @click="delenetmenu(id)">删除</el-button>
                <el-button class="bbutton" @click="editScheme">修改</el-button>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>

    <el-dialog :visible.sync="dialogTableVisible">
      <template slot="title">
        <h1 v-if="lists.length>0">菜单【{{lists[menuindex].name==undefined?"无":lists[menuindex].name}}】的子菜单有:</h1>
      </template>
      <el-table v-if="lists.length>0" :data="lists[menuindex].children==null?[]:lists[menuindex].children" border  style="width:100%;">
        <el-table-column property="name==undefined?'无':name" label="子菜单名称" width="200"></el-table-column>
        <el-table-column property="target==undefined?'无':target" label="链接分类" ></el-table-column>
      </el-table>
    </el-dialog>

  </div>

</template>

<script>
import { deleteMenu} from "@/api/menu"
  export default {
    name: "programDetail2",
    data() {
      return {
        title: '方案详情',
        subtitle: 'Detial Project',
        input: '',
        name:"",
        id:'',
        displayname:"",
        remark:"",
        menuindex: 0, //【更多】index
        menudetail: [],
        picsrc:require("../../assets/img/zdrygl.png"),
        lists:[
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          },{
            picsrc:require("../../assets/img/zdrygl.png"),
            title:"重点人员管理"
          },
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          },{
            picsrc:require("../../assets/img/zdrygl.png"),
            title:"重点人员管理"
          },
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          },{
            picsrc:require("../../assets/img/zdrygl.png"),
            title:"重点人员管理"
          },
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          },{
            picsrc:require("../../assets/img/zdrygl.png"),
            title:"重点人员管理"
          },
          {
            picsrc:require("../../assets/img/shzats.png"),
            title:"社会治安态势"
          }
        ],

        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },

        dialogTableVisible: false,
        dialogVisible1: false,
        formLabelWidth: '120px',
        // radio: '1',
        tableData: [{
          imgsrc: './static/img/shzats.png',
          name: '警情管理平台1',
          id: '1',
          name: 'AAAAAAAA',
          num: 0,
          submenus: [

          ],
          subsrc: [

            './static/img/shzats.png',
            './static/img/shzats.png'
          ],

          ps: ''
        }, {
            imgsrc: './static/img/shzats.png',
          name: '警情管理平台2',
          id: '2',
          name: 'BBBBBBBB',
          num: 1,
          submenus: [{
              src: './static/img/shzats.png',
              name: "社会治安",
              type: "地图链接"
            }

          ],

          ps: '上海市普陀区金沙江'
        }, {
          imgsrc: './static/img/shzats.png',
          name: '警情管理平台3',
          id: '3',
          name: 'CCCCCCCCCCC',
          num: 3,
          submenus: [{
              src: './static/img/shzats.png',
              name: "社会治安",
              type: "地图链接"
            },
            {
              src: './static/img/shzats.png',
              name: "社会治安",
              type: "地图链接"
            },
            {
              src: './static/img/shzats.png',
              name: "社会治安",
              type: "地图链接"
            }
          ],

          ps: '上海市普陀区金沙江'
        }, {
          imgsrc: './static/img/shzats.png',
          name: '警情管理平台4',
          id: '4',
          name: 'DDDDDDD',
          num: 4,
          submenus: [{
              src: './static/img/shzats.png',
              name: "社会治安",
              type: "地图链接"
            },
            {
              src: './static/img/shzats.png',
              name: "社会治安",
              type: "地图链接"
            },
            {
              src: './static/img/shzats.png',
              name: "社会治安",
              type: "地图链接"
            },
            {
              src: './static/img/shzats.png',
              name: "社会治安",
              type: "地图链接"
            }
          ],

          ps: ''
        }, {
          imgsrc: './static/img/shzats.png',
          name: '警情管理平台4',
          id: '5',
          name: 'EEEEEEEE',
          num: 5,
          submenus: [{
              src: './static/img/shzats.png',
              name: "社会治安",
              type: "地图链接"
            },
            {
              src: './static/img/shzats.png',
              name: "社会治安",
              type: "地图链接"
            },
            {
              src: './static/img/shzats.png',
              name: "社会治安",
              type: "地图链接"
            },
            {
              src: './static/img/shzats.png',
              name: "社会治安",
              type: "地图链接"
            },
            {
              src: './static/img/shzats.png',
              name: "社会治安",
              type: "地图链接"
            }
          ],

          ps: ''
        }]

      };
    },
    methods: {
      changeRouter: function() {

      },
      imgError(item) {
       if(item.storeId){
					item.image.storeId = require('../../assets/img/shzats.png');
				}
    },
      i(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      showDetail: function(index) {
        //定义显示数据
        this.menuindex = index;
        this.dialogTableVisible = true;
      },
      deleteRow: function(index1) {
        //提交，成功后,更新数据
              //  alert(index1);
        //删除该行
        $("#tbodyid").children().eq(index1).remove();
      },
      delenetmenu(id){
        console.log(id);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteMenu(id).then(res=>{
					console.log(res);
            if(res.status==200){
              this.$message({
								type: 'success',
					message: '菜单删除成功！'
						});
              this.$router.push('/programLib/list')
            }
            
          }).catch(error=>{
            this.$message('菜单删除失败！请检查是否有子菜单？');
            console.log(error)
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
				
      },
      editScheme:function(){
      	this.$router.push({
					name: '新增方案',
					params: {
						title: '修改方案',
						subtitle: 'edit project',
						list:this.$route.params.list
					}
				})
      }

    },
    mounted() {
      
      this.name=this.$route.params.list.name;
      this.id=this.$route.params.list.id;
      this.displayname = this.$route.params.list.displayname;
      this.remark = this.$route.params.list.remark;
      let data=null;
      if(this.$route.params.list.children){
        data=this.$route.params.list.children;
      }else{
        data=[]
      }
      data.forEach(item=>{
        if(item.children==null){
          item.children=[];
        }
        return item.children
      })
      console.log(data);
      this.lists=data;
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }
  // img {
  //   filter: drop-shadow(0px 0 #93c4ff);
  // }
  table,
    table tr th,
    table tr td {
      border: 1px solid #9fa1a0;
      text-align: center;
    }
    
    table tr th {
      height: 43px;
      background-color: #2a323d;
      color: #ffffff;
    }
    
    table tr td {
      height: 125px;
    }
    tbody tr {
      height: 125px;
    }



  .title {
    margin: 0;
    padding: 0;
    margin-bottom: 14px;
    font-weight: 600;
    font-size: 16px;
    .title-main {
      position: relative;
      margin-left: -220px;
    }
    .title-other {
      margin-left: 80px;
    }
  }
  .picture-pool {
    position: relative;
    //width: 1548px;
    height: 948px;
    background-color: #fff;
    .main {
      width: 100%;
      padding: 0 40px;
      background-color: #fff;
       overflow: scroll;

      .main-title {
        // position: fixed;
        text-align: center;
        padding: 0;
        margin: 0;
        padding-top: 20px;
        font-size: 20px;
        font-weight: 600;
        font-family: SimHei;
      }
      .main-hr {
        height: 2px;
        margin: 0;
        padding: 0;
        margin-top: 2px;
        width: 120px;
        background-color: #d3d3d3;
        border: 0;
        margin-left: calc(50% - 60px);
      }
      .main-subtitle {
        text-align: center;
        color: #d3d3d3;
        margin: 0;
        padding: 0;
        font-size: 8px;
        margin-top: 5px;
        letter-spacing: 1px;
      }
      .topdiv {
        // position: absolute;
        margin-top: 15px;
        font-size: 16px;
        color: #29313e;
        p {
          margin-top: 15px;
          margin-bottom: 15px;
        }
      }


//第一页 图片
      .bottomdiv{
        margin-top: 20px;
        font-size: 16px;
        // width: 100%;
        height: 768px;
        .bottom-left{
          float: left;
          width: 100px;
          // height: 1080px;
          // background-color: gray;
           .left-p{
            display: inline-block;
          }
        }
        .bottom-right{
          float: left;
          width: calc(100% - 280px);
          height: 713px;
          // padding: 20px 50px;
          // width: 1920px;
          // height: 1080px;
          background-image: url(../../assets/img/bg2.png);
          background-size: 100% 100%;
          background-color: #002543;
          color: #D5D8DF;
          // .head-div{
          //   // height: 132px;
          //   height: 100px;
          //   width: 100%;
          //   .head-r{
          //     width:336px; 
          //     text-align: right;
          //   }
          // }
          .content-div{
            //width: 885px;
            width:100%;
            height: 489px;
            margin: 0px auto;
            margin-top: 100px;
            padding-left: 20px;
          .el-row {
            margin-top: 20px;
            margin-bottom: 20px;
            &:last-child {
              margin-bottom: 0;
            }
          }
          .el-col {
            border-radius: 4px;
          }
          //
          .bg-purple-light {
            background: #e5e9f2;
          }
          .grid-content {
            border-radius: 4px;
            // min-height: 123px;
            min-height: 165px;
            width: 193px;
            background-image: url(../../assets/img/kuang-shzats.png);
            background-size: 100% 100%;
            overflow: hidden;
            img {
              display: block;
              // margin: 0 auto;
              margin-left: -40px;
              padding-top: 30px;
              padding-bottom: 10px;

              filter: drop-shadow(120px 0 #93c4ff);

            }
            p {
              text-align: center;
            }
          }
          .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
          }

          }

        }
      }
  }

}

.second-part {

  // 
  margin-left:100px;
  width: 90%;
  table{
    width:100%;
  }
  .table-scroll {
    overflow: scroll;
    //width: calc(100% - 77px);
    width: 100%;
    .table-height {
      max-height: 503px;
      .tableul {
        display: flex;
        flex-direction: column;
        .lispan {
          width: 35px;
          height: 35px;
          float: left;
          margin-top: -4px;
          margin-bottom: -2px;
          .pic {
            width: 35px;
            height: 35px;
            margin-left: 50px;
          }
        }
      
        
      }
      .libutton {
        margin-top: 4px;
        float: right;
      }
    }
    #tbodyid {
      position: relative;
      top: 95px;
      
    }
  }
  
  .table-scroll::-webkit-scrollbar {
    display: none;
  }
// 
  .ulli {
        flex: 1;
        border-top: 1px solid #d3d4d6;
        padding: 9px 0;
      }
      
    .lione{
    flex: 1;
    border-top: 1px solid #d3d4d6;
    padding: 20px 70px 20px 70px;
        }
    .linone {
          flex: 1;
          border-top: 1px solid #d3d4d6;
          padding: 20px 70px 20px 70px;
        }
  .listyle1 {
    flex: 1;
    border-top: 1px solid #d3d4d6;
    padding: 5px 70px 5px 70px;
  /*  padding: 10px 70px 8px 70px;*/
  }
  
  .listyle2 {
    flex: 1;
    border-top: 1px solid #d3d4d6;
    padding: 5px 0px 5px 70px;
  }
  
  .bbutton {
    height: 35px;
    width: 100px;
    color:#78D7D2;
    border-color:#78D7D2; 
  }
  
  .bbutton:hover {
    background-color: #03DADC;
    color: #C8FFFF;
  }
  .textarea {
    height: 75px;
    width: 910px;
    position: absolute;
  }


  // 
  .table-name {
        margin-top: 15px;
        margin-bottom: 15px;
      }
      .picture-item-wrapper {
        width: 100%;
        .picture {
          position: relative;
          left: calc(50% - 50px);
          width: 100px;
          height: 100px;
          /*margin: 14px 20px 12px 20px;*/
          display: flex;
          justify-content: center;
          overflow: hidden;
          user-select: none;
          background-color: #29333d;
          .item-pic {
            position: absolute;
            max-width: 100px;
            max-height: 100px;
            margin: auto;
            margin-left: -120px;
            top: 0;
            bottom: 0;
            border-right: 0 solid transparent;
            filter: drop-shadow(120px 0 #93c4ff);
            
          }
          .img {
              width: 20px;
              height: 20px;
            }
        }
      }

}

</style>